time.icon
{
  font-size: 12px; /* 改变字体的大小，图标的大小会跟着改变 */
  display: block;
  position: relative;
  width: 80px;
  height: 6em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}
time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.3em 0;
  color: #fff;
  background-color: #1E90FF;
  border-bottom: 1px dashed #1E90FF;
  box-shadow: 0 2px 0 #1E90FF;
}
time.icon .repairDays
{
  position: absolute;
  top: 0;
  padding: 0.3em 0;
  color: #fff;
  background-color: #e3bc08;
  border-bottom: 1px dashed #e3bc08;
  box-shadow: 0 2px 0 #e3bc08;
}
time.icon em
{
  position: absolute;
  bottom: 0.3em;
}
time.icon span
{
  font-size: 18px;
  letter-spacing: -0.05em;
  padding-top: 25px;
  color: #2f2f2f;
}
.onTheJob {
  width:16px;
  height:10px;
  display: inline-block;
  font-size:30px;
  line-heigth:16px;
  text-align:center;
  color:#1e90ff;
  text-decoration:none;
}
.quitTheJob {
  width:16px;
  height:10px;
  display: inline-block;
  font-size:30px;
  line-heigth:16px;
  text-align:center;
  color:#e3bc08;
  text-decoration:none;
}
.forMask{
  width: 100%;
  height: 100%;
  position:absolute;
}
.attendRight {
  float: left;
  width: 68%;
  height: 500px;
  margin-top: 10px;
}
.attendLeft {
  border-radius: 10px;
  width: 30%;
  height: 500px;
  margin-top: 10px;
  float: left;
  background-color: #EDF6FA;
}
.personHead {
  width: 120px;
  height: 120px;
  margin: 20px auto;
}
.personHead img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.personName p {
  text-align: center;
  font-size: 18px;
  margin-top: -10px;
  font-weight: 700;
}
span.personlabel {
  font-size: 15px;
  margin-left: 10px;
  float: left;
  font-weight: 700;
  height: 40px;
}
span.personInfo {
  font-size: 16px;
  height: 40px;
}
.attendLeft-inBottom {
  width: 100%;
  height: 200px;
  margin-top: 140px;
}
.attendRight-top span{
  float:left;
  font-size:20px;
}
.attendRight-top .arrowLeft img,.attendRight-top .arrowRight img{
  width:25px;
  height:25px;
  cursor:pointer;
}
.attendRight-top .arrowLeft {
  margin-left: 25%;
}
.attendRight-top .currentMonth {
  margin-left: 20%;
}
.attendRight-top .arrowRight {
  margin-left: 20%;
}
.attendRight-middle {
  width: 100%;
  height: 120px;
  clear: left;
}
.attendRight-middle-top div:nth-child(1){
  float:left;
  margin-left:18%;
  margin-top:10px
}
.attendRight-middle-top div:nth-child(2){
  float:left;
  margin-left:15%;
  margin-top:10px
}
.attendRight-middle-top div:nth-child(3){
  float:left;
  margin-left:17%;
  margin-top:10px
}
.attendRight-middle-botm {
  clear:  left;
  float:  right;
  margin-right: 20px;
}
.attendRight-middle-botm div {
  float: left;
}